<template>
  <lc-card
    :thumb="getFileImage(file[fileExtKey])"
    :title="getFileName()"
    :desc="file[fileSizeKey]|formatFileSize"
    rounded
    size="40"
    @click="onClick"
  >
    <slot
      slot="rightIcon"
      name="rightIcon"
    />
  </lc-card>
</template>

<script>
import { allFileTypes } from '@/constants/file'
import LcCard from '@/components/LcCard'
export default {
  components: {
    LcCard
  },
  props: {
    file: {
      type: Object
    },
    labelKey: {
      type: String,
      default: 'fileName'
    },
    fileExtKey: {
      type: String,
      default: 'ext'
    },
    fileSizeKey: {
      type: String,
      default: 'totalBytes'
    }
  },
  methods: {
    getFileName() {
      if (this.file[this.fileExtKey]) {
        return this.file[this.labelKey] + '.' + this.file[this.fileExtKey]
      }
      return this.file[this.labelKey]
    },
    // 获取展示图片
    getFileImage(ext) {
      if (allFileTypes.indexOf(ext) === -1) {
        ext = 'attachment'
      }
      // 如果是图片显示图片缩略图

      return `./static/images/file/${ext}.png`
    },
    // 获取展示图片
    getFileIcon(ext) {
      if (allFileTypes.indexOf(ext) === -1) {
        return 'file-unknown'
      }
      return `file-${ext}`
    },
    onClick() {
      this.$emit('click')
    }
  }

}
</script>
